<template>
    <div>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">详情</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="6">
                    出口申请单号：<span>{{orderInfo.carOutApply.id}}</span>
                </el-col>
                <el-col :span="8">
                    状态：<span>{{orderInfo.carOutApply.status == null ? "": outApplyStatus[orderInfo.carOutApply.status].label}}</span>
                </el-col>
            </el-row>

            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">保证金明细</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="6">
                    保证金金额：<span>{{orderInfo.bill.amount}}元</span> <el-link type="primary" @click="handleDepositDetails">明细</el-link>
                </el-col>
                <el-col :span="6">
                    付款凭证：<el-link type="primary" @click="handleOpenFile(orderInfo.bill.payProofUrl)">查看</el-link>
                </el-col>
            </el-row>
        </c-template>
        <c-deposit-details ref="cDepositDetails" />
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">车辆基本信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="24">
                    <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="orderInfo.outCarList" v-loading="loading">
                        <el-table-column width="" label="车辆信息" align="center" prop="carInfo" />
                        <el-table-column width="" label="单价（元）" align="center" prop="price" />
                        <el-table-column width="" label="车架号" align="center" prop="vin" />
                        <!-- <el-table-column width="" label="保证金比例" align="center">
                            <template slot-scope="scope">
                                {{scope.row.outMarginRatio}}%
                            </template>
                        </el-table-column>
                        <el-table-column width="" label="保证金金额（元）" align="center">
                            <template slot-scope="scope">
                                {{scope.row.price * scope.row.outMarginRatio/100}}
                            </template>
                        </el-table-column> -->
                    </el-table>
                </el-col>
            </el-row>
        </c-template>
        <el-row :gutter="24" type="flex" justify="end" v-if="orderInfo.bill.status == 2">
            <el-col :span="24" class="flex-x-end">
                <el-button type="primary" @click="handleApprove(true)">确认支付</el-button>
                <el-button type="default" @click="handleApprove(false)">未支付</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { outApplyStatus } from "@/utils/status.js";
import cDepositDetails from "./components/c-deposit-details.vue";
export default {
    components: {
        cDepositDetails
    },
    data () {
        return {
            outApplyStatus: outApplyStatus,
            loading: false,
            id: "",
            isView: true,
            orderInfo: {
                carOutApply: {},
                bill: {}
            }
        };
    },
    mounted () {
        this.getInfo()
    },
    methods: {
        handleDepositDetails () {
            this.$refs.cDepositDetails.handleOpen(this.orderInfo.outCarList);
        },
        handleOpenFile (filePath) {
            if (filePath) {
                window.open(filePath);
            } else {
                this.$message.warning("服务器地址不存在");
            }
        },
        handleApprove (flag) {

            this.$confirm("是否确认该审批结果?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                let data = {
                    id: this.orderInfo.bill.id,
                    flag: flag,
                };
                this.$post({
                    url: "/sellerBill/approveOutDeposit",
                    data,
                }).then(
                    () => {
                        this.$message.success("审批成功");
                        this.loading = false;
                        this.getInfo()
                    },
                    () => {
                        this.loading = false;
                    }
                );
            })
        },
        async getInfo () {
            if (this.$route.query.id) {
                this.isView = eval(this.$route.query.isView)
                this.id = this.$route.query.id
                const params = {
                    id: this.$route.query.id,
                };
                this.loading = true;
                let res = await this.$get({ url: "/sellerBill/getById", params })
                this.orderInfo = res
                this.loading = false;
            }
        },
    },
};
</script>